<script setup>
import { listNeedCheckProject, checkProject } from "@/api/project.js";
import { ref } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";

const CheckProject_list = ref([]);

// 获取待审核项目列表
const getCheckProjectList = async () => {
  const response = await listNeedCheckProject();
  if (response.data.code === 200) {
    CheckProject_list.value = response.data.data;
  } else {
    console.log("Error: " + response.data.message);
  }
};
getCheckProjectList();

// 处理同意或拒绝操作
const handleAgreeorReject = async (projectId, status) => {
  const actionText = status === 1 ? "同意" : "拒绝";

  if (status === 3) {
    // 弹出带输入框的确认框，获取拒绝理由
    try {
      const remark = await ElMessageBox.prompt(
          "请输入拒绝理由",
          "拒绝项目",
          {
            confirmButtonText: "提交",
            cancelButtonText: "取消",
            inputType: "textarea",
            inputPlaceholder: "请填写拒绝理由...",
            inputValidator: (value) => !!value || "拒绝理由不能为空",
            inputErrorMessage: "拒绝理由不能为空",
          }
      );
      // 如果用户提交了理由，则调用后端接口
      await submitDecision(projectId, status, remark.value);
    } catch {
      ElMessage({
        type: "info",
        message: "操作已取消",
      });
    }
  } else {
    // 同意操作直接弹出确认框
    try {
      await ElMessageBox.confirm(
          `确认要${actionText}此项目申请吗？`,
          "提示",
          {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "success",
          }
      );
      await submitDecision(projectId, status);
    } catch {
      ElMessage({
        type: "info",
        message: "操作已取消",
      });
    }
  }
};

// 提交同意或拒绝请求
const submitDecision = async (projectId, status, remark = "") => {
  console.log("projectId: " + projectId + ", status: " + status + ", remark: " + remark);
  const response = await checkProject({ projectId: projectId, status, remark });
  if (response.data.code === 200) {
    ElMessage({
      type: "success",
      message: `${status === 1 ? "同意" : "拒绝"}操作成功！`,
    });
    // 刷新列表
    await getCheckProjectList();
  } else {
    ElMessage({
      type: "error",
      message: response.data.message || "操作失败",
    });
  }
};
</script>

<template>
  <el-header>
    <h1 style="text-align: center; margin-left: -20px;">审核申报项目</h1>
  </el-header>

  <el-table border :data="CheckProject_list" style="width: 100%; margin-top: 20px;">
    <el-table-column prop="projectName" label="项目名称" width="180" />
    <el-table-column label="项目图片" width="150">
      <template #default="{ row }">
        <img style="width: 80px; height: 80px;" :src="row.image" alt="项目图片" class="table-image" />
      </template>
    </el-table-column>
    <el-table-column prop="lab" label="实验室" width="150" />
    <el-table-column prop="teacherName" label="指导老师" width="100" />
    <el-table-column prop="userName" label="负责人" width="100" />
    <el-table-column label="开始时间" width="100">
      <template #default="{ row }">
        <el-button type="text">
          {{ new Date(row.startTime).toLocaleDateString() }}
        </el-button>
      </template>
    </el-table-column>
    <el-table-column label="结束时间" width="100">
      <template #default="{ row }">
        <el-button type="text">
          {{ new Date(row.endTime).toLocaleDateString() }}
        </el-button>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="160">
      <template #default="{ row }">
        <el-button type="success" @click="handleAgreeorReject(row.id, 1)">同意</el-button>
        <el-button type="danger" @click="handleAgreeorReject(row.id, 3)">拒绝</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped>
.table-image {
  border-radius: 5px;
}
</style>
